<template>
	<div class="library_member" v-loading="tabLoading">
		<el-tabs class="custom_top" type="card" v-model="activeName" :addable="!disabled" @tab-add="handleOpenDialog()">
			<el-tab-pane v-for="(item, index) in libraryRoles" :key="index" :label="item.name" :name="item.id">
				<template slot="label">
					{{ item.name }}
					<el-dropdown size="small" @command="handleDropdownCommand($event, item)" v-if="!disabled">
						<i class="el-icon-more"></i>
						<el-dropdown-menu slot="dropdown">
							<template v-if="item.level === '1'">
								<el-dropdown-item command="look" icon="el-icon-view">查看权限</el-dropdown-item>
							</template>
							<template v-else>
								<el-dropdown-item command="edit" icon="el-icon-edit">编辑角色</el-dropdown-item>
								<el-dropdown-item command="delete" icon="el-icon-delete">删除角色</el-dropdown-item>
							</template>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-tab-pane>
		</el-tabs>
		<member-content :list="tableData" :count="dataCount" :role-id="activeName" :library-id="libraryId" :disabled="disabled" @refresh="handleRefreshData()">
			<template slot="more" v-if="dataCount > 32">
				<el-button type="text" :icon="loadingIcon" :disabled="moreDisabled" @click="handleLoadMoreData()">{{ loadingText }}</el-button>
			</template>
		</member-content>
		<form-dialog v-model="formDialog" :data-id="dataId" :library-id="libraryId" :disabled="isDisabled" @refresh="queryLibraryRoles"></form-dialog>
	</div>
</template>

<script>
import formDialog from './form';
import memberContent from './content';
import listMixins from '@/mixins/listMixins';
import { getLibMemberList } from '@/api/data/tbNetPower';
import { getLibraryRoleList, deleteLibraryRole } from '@/api/data/tbNetRole';
export default {
	mixins: [listMixins],
	components: { formDialog, memberContent },
	props: {
		libraryId: { type: String, default: '' },
		disabled: { type: Boolean, default: false }
	},
	data() {
		return {
			activeName: '1',
			libraryRoles: [],
			tabLoading: false,
			isDisabled: false,
			pageName: '库角色',
			queryData: { page: 1, limit: 32 }
		};
	},
	computed: {
		listFunction() {
			return eval(getLibMemberList);
		},
		deleteFunction() {
			return eval(deleteLibraryRole);
		},
		requestParams() {
			let params = { ...this.queryData };
			params['dirId'] = this.libraryId;
			params['roleId'] = this.activeName;
			return params;
		},
		moreDisabled() {
			let data = this.queryData;
			return data.page * data.limit > this.dataCount;
		},
		loadingIcon() {
			return this.loading ? 'el-icon-loading' : '';
		},
		loadingText() {
			let data = this.queryData;
			if (!!this.loading) {
				return '更多库用户加载中';
			} else if (data.page * data.limit > this.dataCount) {
				return '无更多库用户';
			} else {
				return '加载更多库用户';
			}
		}
	},
	watch: {
		activeName(val) {
			this.queryTableData();
		}
	},
	mounted() {
		this.queryLibraryRoles();
	},
	methods: {
		//获取库角色数据
		async getLibraryRoles() {
			let params = { dirId: this.libraryId };
			let result = await getLibraryRoleList(params).then((res) => res.data);
			this.tabLoading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				this.libraryRoles = datas.sort((a, b) => Number(a.level) - Number(b.level));
				this.activeName = this.libraryRoles[0].id;
			}
		},

		//查询库角色数据
		queryLibraryRoles() {
			this.tabLoading = true;
			this.getLibraryRoles();
		},

		//获取更多库成员
		handleLoadMoreData() {
			this.queryData.page++;
			this.queryTableData();
		},

		//刷新库角色成员
		handleRefreshData() {
			this.queryData.page = 1;
			this.queryTableData();
		},

		//删除库角色
		handleDelLibraryRole(data) {
			let that = this;
			this.$confirm(`此操作将删除库角色<font color="#f00">【${data.name}】</font>, 是否继续?`, '删除提示', {
				type: 'warning',
				cancelButtonText: '取消',
				confirmButtonText: '确定',
				dangerouslyUseHTMLString: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await deleteLibraryRole(data.id).then((res) => {
							if (res.data.code === '0') {
								that.$message.success('删除库角色成功');
								that.queryLibraryRoles();
							}
						});
						instance.confirmButtonLoading = false;
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//资源角色下拉
		handleDropdownCommand(command, data) {
			if (command === 'delete') {
				this.handleDeleteData(data, () => {
					this.queryLibraryRoles();
				});
			} else if (command === 'edit') {
				this.isDisabled = false;
				this.handleOpenDialog(data.id);
			} else if (command === 'look') {
				this.isDisabled = true;
				this.handleOpenDialog(data.id);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_member::v-deep {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.el-tabs__new-tab {
		margin: 10px;
	}
	.el-dropdown {
		margin-left: 6px;
		margin-right: -16px;
		padding-right: 8px;
		line-height: 1;
	}
}
</style>
